<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import SearchBox from '@/components/common/SearchBox.vue';

import plan_begin from '@/assets/image/plan/plan_begin.png';
import plan_suzhou from '@/assets/image/plan/plan_suzhou.png';
import { useRouter } from 'vue-router';

const router = useRouter();

const state = reactive({
  overlayShow: false,
  imgSrc: plan_begin,
  panelHeight: 0,
});

const anchors = [
  0,
  Math.round(0.5 * window.innerHeight),
  Math.round(0.7 * window.innerHeight),
];

const navigateTo = (name: string) => {
  router.push(name);
};

const search = (value: string) => {
  console.log(value);
};

const select = (value: string) => {
  state.overlayShow = true;
  setTimeout(() => {
    changeImg(value);
    state.overlayShow = false;
  }, 200);
};

const changeImg = (value: string) => {
  if (value == '苏州') {
    state.imgSrc = plan_suzhou;
  } else if ('全国') {
    state.imgSrc = plan_begin;
  }
};

const planClick = () => {
  state.panelHeight = Math.round(0.5 * window.innerHeight);
};

const addPlan = () => {
  navigateTo('/addPlan');
};

onMounted(() => {
  state.overlayShow = true;
  setTimeout(() => {
    state.overlayShow = false;
  }, 200);
});
</script>

<template>
  <div class="bg-img">
    <img :src="state.imgSrc" />
    <div class="search">
      <div class="search_box">
        <SearchBox @search="search" @select="select"></SearchBox>
      </div>
    </div>
    <div class="plan_btn" @click="planClick">
      <img src="@/assets/icon/common/path.svg" />
      <span>定制路线</span>
    </div>
  </div>
  <van-overlay :show="state.overlayShow">
    <van-loading class="wrapper" type="spinner" />
  </van-overlay>
  <van-floating-panel v-model:height="state.panelHeight" :anchors="anchors">
    <div class="panel_content">
      <div class="header">我的路线</div>
      <div class="content">
        <img src="@/assets/image/plan/nothing.png" />
        <p>还未添加自由行路线哦~</p>
        <span>点击按钮添加路线</span>
      </div>
      <div class="footer" @click="addPlan">
        <img class="icon_add" src="@/assets/icon/common/add.svg" />
        <span>新建自由行路线</span>
      </div>
    </div>
  </van-floating-panel>
</template>
<style scoped lang="scss">
.bg-img {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .search {
    display: flex;
    justify-content: center;
    width: 100%;
    // z-index: 2;
    position: absolute;
    top: 26px;
  }
  .search_box {
    width: 95%;
  }
  .plan_btn {
    position: absolute;
    top: 16%;
    right: 14px;
    width: 40px;
    height: 69px;
    box-sizing: border-box;
    padding: 4px;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-radius: 6px;
    img {
      width: 80%;
      height: auto;
    }
    span {
      margin-top: 3px;
      font-size: 13px;
      text-align: center;
      color: #595959;
      line-height: 1.2;
      font-weight: bold;
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.panel_content {
  padding: 0 20px;
  color: #3a3a3a;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .header {
    width: 100%;
    padding-bottom: 2px;
    font-weight: bold;
    font-size: 22px;
    border-bottom: 1px solid #888888;
  }
  .content {
    box-sizing: border-box;
    padding: 12px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    img {
      width: 60%;
      height: auto;
    }
    p {
      font-size: 20px;
      font-weight: bold;
    }
    span {
      color: #595959;
    }
  }
  .footer {
    background-color: #00bf69;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3px 16px 3px 6px;
    border-radius: 30px;
    .icon_add {
      width: 40px;
      height: 40px;
    }
    span {
      margin-left: 2px;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
  }
}
</style>
